<template>
    <h1>vuex4版本的计数器</h1>
    <h2>{{store.state.counter.num}}</h2>
    <button @click="increment(2)">同步更新</button>
    <button @click="incrementAsyc(3)">异步更新</button>
</template>

<script lang='ts' setup>
import {useStore} from 'vuex'
const store=useStore()
const increment=(payload:number)=>{
    //在组件中要调用mutations中的方法可以使用store.commit(方法名,传递的数据)
    store.commit("counter/increment",payload)
}
const incrementAsyc=(payload:number)=>{
    //在组件中要调用acitons中的异步方法，可以通过stroe.dispatch(方法名，传递的参数)
    store.dispatch("counter/incrementAsync",payload)
}
</script>

<style lang='scss' scoped>
</style>